<template>
  <div class="current-time">{{ componentOption.currentTime }}</div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { dayjs } from 'element-plus';
const componentOption = ref({
  currentTime: '',
});
// 获取当前时间的功能函数
const getCurrentTime = () =>
  setInterval(
    () =>
      (componentOption.value.currentTime = dayjs(Date.now()).format(
        'YYYY-MM-DD HH:mm:ss',
      )),
    1000,
  );

let timerId: ReturnType<typeof setInterval> | null = null;

onMounted(() => {
  timerId = getCurrentTime();
});

onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId);
  }
});
</script>

<style scoped lang="scss" name="CurrentTime">
.current-time {
  width: 20%;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2%;
  font-size: 20px;
}
</style>
